<!DOCTYPE html>
<html>
<head>
    <title>后端登录接口测试</title>
    <style>
        body { font-family: Arial, sans-serif; max-width: 800px; margin: 40px auto; padding: 20px; }
        .test-section { margin: 20px 0; padding: 15px; border: 1px solid #ddd; border-radius: 5px; }
        input { margin: 5px; padding: 8px; width: 200px; }
        button { padding: 10px 15px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; }
        button:hover { background: #0056b3; }
        .result { margin-top: 10px; padding: 10px; background: #f8f9fa; border-radius: 4px; }
        .success { color: green; }
        .error { color: red; }
    </style>
</head>
<body>
    <h1>后端登录接口响应测试</h1>
    
    <div class="test-section">
        <h3>方法1: 使用浏览器开发者工具</h3>
        <p>打开浏览器开发者工具 (F12)，在Network标签页中：</p>
        <ol>
            <li>在登录页面进行登录操作</li>
            <li>在Network标签中找到对 <code>/auth/login/</code> 的请求</li>
            <li>点击该请求，查看Response标签页中的响应数据</li>
            <li>检查是否包含以下字段：<code>access</code>, <code>refresh</code>, <code>user_id</code>, <code>username</code></li>
        </ol>
    </div>

    <div class="test-section">
        <h3>方法2: 直接测试接口 (需要启动后端服务)</h3>
        <div>
            <input id="username" type="text" placeholder="用户名" value="test">
            <input id="password" type="password" placeholder="密码" value="test">
            <button onclick="testLogin()">测试登录接口</button>
        </div>
        <div id="result" class="result"></div>
    </div>

    <script>
        async function testLogin() {
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            const resultDiv = document.getElementById('result');
            
            resultDiv.innerHTML = '正在测试...';
            
            try {
                const response = await fetch('http://localhost:8000/auth/login/', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ username, password })
                });
                
                const data = await response.json();
                
                let html = `<div class="${response.ok ? 'success' : 'error'}">`;
                html += `<p>状态码: ${response.status}</p>`;
                html += `<p>响应数据: <pre>${JSON.stringify(data, null, 2)}</pre></p>`;
                
                // 检查关键字段
                html += '<p>字段检查:</p><ul>';
                html += `<li>access token: ${data.access ? '✅ 存在' : '❌ 缺失'}</li>`;
                html += `<li>refresh token: ${data.refresh ? '✅ 存在' : '❌ 缺失'}</li>`;
                html += `<li>user_id: ${data.user_id ? '✅ 存在' : '❌ 缺失'}</li>`;
                html += `<li>username: ${data.username ? '✅ 存在' : '❌ 缺失'}</li>`;
                html += '</ul>';
                
                html += '</div>';
                resultDiv.innerHTML = html;
                
            } catch (error) {
                resultDiv.innerHTML = `<div class="error">
                    <p>请求失败: ${error.message}</p>
                    <p>可能的原因：</p>
                    <ul>
                        <li>后端服务未启动</li>
                        <li>网络连接问题</li>
                        <li>CORS策略限制</li>
                    </ul>
                </div>`;
            }
        }
    </script>
</body>
</html>
